const gulp = require('gulp')                    //创建任务
const uglify = require('gulp-uglify')           //打包JS 去空格注释
const babel = require('gulp-babel')             //es6转es5 浏览器兼容
const rev = require('gulp-rev')                 //加随机名，内容修改就重新生成新的随机名
const clean = require('gulp-clean')             //删除目录文件
const minifyCSS = require('gulp-minify-css')    //打包CSS 去空格去注释
const htmlmin = require('gulp-htmlmin')         //打包html
const revCollector = require('gulp-rev-collector')//根据temp目录记录的规则替换HTML里面的文件路径
const imagemin = require('gulp-imagemin')    //压缩图片 

gulp.task('log', () => {
    console.log('gulp调用我啦！');
})
//清除目录
const fs = require('fs')
gulp.task('clean', over => {
    if (fs.existsSync('dist/')) {
        gulp
            .src('dist/', { read: false })
            .pipe(clean())
    }
    setTimeout(() => {
        over()
    }, 2000);
})

//打包js
gulp.task('js', over => {
    // gulp.src(['./src/js/a.js','./src/js/b.js'])
    gulp
        .src('./src/js/*.js')
        .pipe(babel({ "presets": ["env"] }))
        .pipe(rev())
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))


        //将js的随机名保存到json中
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/js'))  // 写入清单到temp目录下

    over()
})

//打包css
gulp.task('css', over => {
    gulp
        .src('./src/css/*.css')
        .pipe(rev())
        .pipe(minifyCSS())
        .pipe(gulp.dest('./dist/css/'))


        //将css的随机名保存到json中
        .pipe(rev.manifest())
        .pipe(gulp.dest('temp/css'))  // 写入清单到temp目录下

    over()
})

// 打包IMG  
gulp.task('imgs', over => {
    gulp
        .src('./src/imgs/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/imgs/'))

    setTimeout(() => {
        over()
    }, 15000);
})

//打包HTML
gulp.task('html', over => {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp
        .src(['temp/**/*.json', './src/*.html'])
        .pipe(revCollector())
        .pipe(htmlmin(options))
        .pipe(gulp.dest('./dist/'))

    over()
})

//同步执行多任务
gulp.task('build', gulp.series('clean', 'js', 'css', 'imgs', 'html', () => {
    console.log('打包完成');
}))

//搭建服务器
const server = require('browser-sync').create();
const watch = require('gulp-watch');
const { createProxyMiddleware } = require('http-proxy-middleware')

gulp.task('serve', function () {
    server.init({
        // server: './src',
        server: {
            baseDir: './src',
            middleware: [
                createProxyMiddleware('/api', {
                    // 目标服务器网址
                    target: "http://kg.zhaodashen.cn/v1",
                    changeOrigin: true, // 是否允许跨域
                    secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                    pathRewrite: {      // 重写路径请求
                        // 移除
                        // '^/remove/api' : ''
                        '^/api': ''
                    },
                })
            ]
        },
        port: 3000
    })
    // 监控文件修改
    watch('src/*.html', function () {
        console.log('你修改HTML文件了')
        server.reload()
    })
    watch('src/css/*.css', function () {
        console.log('你修改CSS文件了')
        server.reload()
    })
    watch('src/js/*.js', function () {
        console.log('你修改JS文件了')
        server.reload()
    })
})